<template name="course">
	<view class="page flex flex-direction">
		<cu-custom bgColor="bg-black"><block slot="content">预约课程</block></cu-custom>
		<view>
			<scroll-view scroll-x class="bg-black nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in courseDate" :key="index" @tap="tabSelect" :data-id="index">
					{{courseDate[index]}}
				</view>
			</scroll-view>
			<branch></branch>
		</view>
		<swiper class="swiper course-list-wrap flex-sub" :duration="200" :current="TabCur" @change="changeDate" @animationfinish="getCourseList">
			<swiper-item class="swiper-item" v-for="dateCourse in courseDate" :key="dateCourse">
				<scroll-view scroll-y :scroll-top="scrollTop" class="course-list">
					<course-panel v-for="course in dateCourseLen" :key="course"></course-panel>
					<view class="cu-tabbar-height"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "course",
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				scrollLeft: 0,
				scrollTop: 0,
				swiperHeight: 0,
				courseDate: [
					'今天 7/15',
					'明天 7/16',
					'后天 7/17',
					'周四 7/18',
					'周五 7/19',
					'周六 7/19',
					'周日 7/19'
				],
				dateCourseLen: 0
			};
		},
		mounted() {
			this.getCourseList()
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			setSwiperHeight() {
				const info = uni.createSelectorQuery().select('.course-list')
				info.boundingClientRect((data) => {
					this.swiperHeight = `${data.height}px`
				}).exec()
			},
			getCourseList() {
				this.dateCourseLen = Math.ceil(Math.random()*8)
				this.scrollTop = 0
			},
			changeDate(e) {
				this.TabCur = e.detail.current
				this.scrollLeft = (e.detail.current - 1) * 60
			},
		}
	}
</script>

<style lang="scss">
	.page{
		height: 100vh;
		.course-list-wrap{
			// height: 100upx; // hack
		}
		.course-list{
			height: 100%;
		}
	}
</style>
